<template>
  <div class="message">
    <div class="title">
      <span @click="fun('One')" :class="lei1">发布</span>
      <span @click="fun('Two')" :class="lei2">评论</span>
      <span @click="fun('Three')" :class="lei3">合集</span>
      <span @click="fun('Four')" :class="lei4">收藏</span>
    </div>
      <component :is="id"></component>
  </div>
</template>

<script>
import One from '@/components/personal/message_one.vue'
import Two from '@/components/personal/message_two.vue'
import Three from '@/components/personal/message_three.vue'
import Four from '@/components/personal/message_four.vue'
export default {
  data(){
    return{
      id:'One',
      lei1:"actived",
      lei2:"",
      lei3:"",
      lei4:""
    }
  },
  methods: {
    fun(data){
      this.id = data;
      this.lei1 = '';
      this.lei2 = '';
      this.lei3 = '';
      this.lei4 = '';
      if(data == 'One'){
        this.lei1 = 'actived';
      }
      if(data == 'Two'){
        this.lei2 = 'actived';
      }
      if(data == 'Three'){
        this.lei3 = 'actived';
      }
      if(data == 'Four'){
        this.lei4 = 'actived';
      }
    }
  },
  components:{
    One,
    Two,
    Three,
    Four
  }
}
</script>

<style scoped>
.message {
  height: 0.41rem;
  background-color: rgb(245, 245, 245);
  text-align: center;
  padding: 0 0.15rem;
  border-bottom: 1px solid rgb(230, 230, 230);
}

.message .title span {
  line-height: 0.41rem;
  font-size: 0.16rem;
  font-weight: 700;
  color: rgb(155, 155, 155);
  margin: 0 0.2rem;
}
.message .title .actived {
  color: black;
  padding-bottom: 0.05rem;
  border-bottom: 0.05rem solid rgb(25, 163, 254);
}
</style>